<template>
    <div>
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
            <tr class="t_list_caption">
                <td>种类</td>
                <td>赔率</td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1">{{typetit}}</td>
                <td class="colorRed bolds odds">{{odds}}</td>
            </tr>
        </table>
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
            <tr class="t_list_caption">
                <td>号码</td>
                <td>勾选</td>
                <td>号码</td>
                <td>勾选</td>
                <td>号码</td>
                <td>勾选</td>
                <td>号码</td>
                <td>勾选</td>
                <td>号码</td>
                <td>勾选</td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1"><span class="redBalls">01</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['01']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['01']"></label></td>
                <td class="caption_1"><span class="greenBalls">11</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['11']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['11']"></label></td>
                <td class="caption_1"><span class="greenBalls">21</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['21']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['21']"></label></td>
                <td class="caption_1"><span class="blueBalls">31</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['31']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['31']"></label></td>
                <td class="caption_1"><span class="blueBalls">41</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['41']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['41']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1"><span class="redBalls">02</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['02']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['02']"></label></td>
                <td class="caption_1"><span class="redBalls">12</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['12']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['12']"></label></td>
                <td class="caption_1"><span class="greenBalls">22</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['22']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['22']"></label></td>
                <td class="caption_1"><span class="greenBalls">32</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['32']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['32']"></label></td>
                <td class="caption_1"><span class="blueBalls">42</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['42']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['42']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1"><span class="blueBalls">03</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['03']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['03']"></label></td>
                <td class="caption_1"><span class="redBalls">13</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['13']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['13']"></label></td>
                <td class="caption_1"><span class="redBalls">23</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['23']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['23']"></label></td>
                <td class="caption_1"><span class="greenBalls">33</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['33']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['33']"></label></td>
                <td class="caption_1"><span class="greenBalls">43</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['43']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['43']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1"><span class="blueBalls">04</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['04']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['04']"></label></td>
                <td class="caption_1"><span class="blueBalls">14</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['14']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['14']"></label></td>
                <td class="caption_1"><span class="redBalls">24</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['24']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['24']"></label></td>
                <td class="caption_1"><span class="redBalls">34</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['34']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['34']"></label></td>
                <td class="caption_1"><span class="greenBalls">44</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['44']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['44']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1"><span class="greenBalls">05</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['05']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['05']"></label></td>
                <td class="caption_1"><span class="blueBalls">15</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['15']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['15']"></label></td>
                <td class="caption_1"><span class="blueBalls">25</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['25']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['25']"></label></td>
                <td class="caption_1"><span class="redBalls">35</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['35']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['35']"></label></td>
                <td class="caption_1"><span class="redBalls">45</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['45']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['45']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1"><span class="greenBalls">06</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['06']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['06']"></label></td>
                <td class="caption_1"><span class="greenBalls">16</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['16']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['16']"></label></td>
                <td class="caption_1"><span class="blueBalls">26</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['26']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['26']"></label></td>
                <td class="caption_1"><span class="blueBalls">36</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['36']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['36']"></label></td>
                <td class="caption_1"><span class="redBalls">46</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['46']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['46']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1"><span class="redBalls">07</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['07']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['07']"></label></td>
                <td class="caption_1"><span class="greenBalls">17</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['17']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['17']"></label></td>
                <td class="caption_1"><span class="greenBalls">27</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['27']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['27']"></label></td>
                <td class="caption_1"><span class="blueBalls">37</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['37']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['37']"></label></td>
                <td class="caption_1"><span class="blueBalls">47</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['47']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['47']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1"><span class="redBalls">08</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['08']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['08']"></label></td>
                <td class="caption_1"><span class="redBalls">18</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['18']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['18']"></label></td>
                <td class="caption_1"><span class="greenBalls">28</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['28']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['28']"></label></td>
                <td class="caption_1"><span class="greenBalls">38</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['38']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['38']"></label></td>
                <td class="caption_1"><span class="blueBalls">48</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['48']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['48']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1"><span class="blueBalls">09</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['09']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['09']"></label></td>
                <td class="caption_1"><span class="redBalls">19</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['19']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['19']"></label></td>
                <td class="caption_1"><span class="redBalls">29</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['29']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['29']"></label></td>
                <td class="caption_1"><span class="greenBalls">39</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['39']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['39']"></label></td>
                <td class="caption_1"><span class="greenBalls">49</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['49']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['49']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td class="caption_1"><span class="blueBalls">10</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['10']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['10']"></label></td>
                <td class="caption_1"><span class="blueBalls">20</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['20']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['20']"></label></td>
                <td class="caption_1"><span class="redBalls">30</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['30']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['30']"></label></td>
                <td class="caption_1"><span class="redBalls">40</span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" style="margin:5px auto;" v-model="moneydata['40']" @change="checkboxChange" :disabled="continuousData.betArr.length > 16 && !moneydata['40']"></label></td>
                <td colspan="2"></td>
            </tr>
        </table>

    </div>
</template>

<script>

    var timer = null;
    import axios from 'axios'
    import {lotterytype} from '../../../../assets/js/lotterytype.js'
    export default {
        name: "LhcZxbz",
        props: {  //普通类型：String、Number、Boolean、Null    引用类型： Array、Object
            betmoney: {   //   下注金额
                type: String,
                required: true
            },
            resetinp: {   //   是否重填已下注金额  0为未下注  其他为已下注
                type: Number,
                required: true
            },
            openBet: {  //开奖  可下注
                type: Boolean,
                required: true
            },
            ninetime: {  //90s
                type: Number,
                required: true
            },
        },
        data(){
            return{
                ratedata: {},  //实时赔率
                params: {},  //菜单
                moneydata: {},
                betdataArr: [],  //下注 提交data
                nowitem: '',  //当前操作的下注item号
                arr: [],  //
                typetit: '自选不中',
                odds: '--', 
                continuousData: {
                    betArr: [],  //下注数组
                    radioopt: 0,  //当前类别
                    betnowtype: 0,  //当前类别 赔率
                },
            }
        },
        methods: {
            init(){
                var _this = this;
                // console.log(this.$route.query);

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(window.localStorage.Authorization){
                    
                    _this.$httpGet('/api/game/listRate/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                        
                        if(response.status == 200){
                            _this.ratedata = response.data.rates;
                            // console.log(_this.ratedata);
                            _this.$emit('contBetFun',this.continuousData);

                            if(response.data.need){
                                _this.$httpPost('/api/setting/rateItem/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                                
                                    if(response.status == 200){
                                        
                                    }

                                });
                            }
                        }

                    });

                }

            },
            inits(){
                var _this = this;
                // console.log(this.$route.query);

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(window.localStorage.Authorization){
                    
                    if (timer) {
                        clearInterval(timer);
                        timer = null;
                    }

                    _this.$httpGet('/api/game/listRate/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                        
                        if(response.status == 200){
                            _this.ratedata = response.data.rates;
                            // console.log(_this.ratedata);
                            _this.$emit('contBetFun',this.continuousData);

                            if(response.data.need){
                                _this.$httpPost('/api/setting/rateItem/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                                
                                    if(response.status == 200){
                                        
                                    }

                                });
                            }

                            timer = setInterval(() => {
                                _this.inits();
                            }, 10 * 1000)
                        }

                    });

                }

            },
            checkboxChange(item){

                this.continuousData.betArr = [];

                for (var index in this.moneydata){

                    if(this.moneydata[index]){
                        this.continuousData.betArr.push(index);
                    }

                }

                if(this.continuousData.betArr.length == 0 || this.continuousData.betArr.length == 1 || this.continuousData.betArr.length == 2 || this.continuousData.betArr.length == 3 || this.continuousData.betArr.length == 4){
                    this.typetit = '自选不中';
                    this.odds = '--';
                    this.continuousData.betnowtype = 0;
                }else if(this.continuousData.betArr.length == 5){
                    this.typetit = '五不中';
                    this.odds = this.ratedata['七码:自选不中:五不中'];
                    this.continuousData.betnowtype = this.ratedata['七码:自选不中:五不中'];
                }else if(this.continuousData.betArr.length == 6){
                    this.typetit = '六不中';
                    this.odds = this.ratedata['七码:自选不中:六不中'];
                    this.continuousData.betnowtype = this.ratedata['七码:自选不中:六不中'];
                }else if(this.continuousData.betArr.length == 7){
                    this.typetit = '七不中';
                    this.odds = this.ratedata['七码:自选不中:七不中'];
                    this.continuousData.betnowtype = this.ratedata['七码:自选不中:七不中'];
                }else if(this.continuousData.betArr.length == 8){
                    this.typetit = '八不中';
                    this.odds = this.ratedata['七码:自选不中:八不中'];
                    this.continuousData.betnowtype = this.ratedata['七码:自选不中:八不中'];
                }else if(this.continuousData.betArr.length == 9){
                    this.typetit = '九不中';
                    this.odds = this.ratedata['七码:自选不中:九不中'];
                    this.continuousData.betnowtype = this.ratedata['七码:自选不中:九不中'];
                }else if(this.continuousData.betArr.length == 10){
                    this.typetit = '十不中';
                    this.odds = this.ratedata['七码:自选不中:十不中'];
                    this.continuousData.betnowtype = this.ratedata['七码:自选不中:十不中'];
                }else if(this.continuousData.betArr.length == 11){
                    this.typetit = '十一不中';
                    this.odds = this.ratedata['七码:自选不中:十一不中'];
                    this.continuousData.betnowtype = this.ratedata['七码:自选不中:十一不中'];
                }else if(this.continuousData.betArr.length == 12){
                    this.typetit = '十二不中';
                    this.odds = this.ratedata['七码:自选不中:十二不中'];
                    this.continuousData.betnowtype = this.ratedata['七码:自选不中:十二不中'];
                }else if(this.continuousData.betArr.length == 13){
                    this.typetit = '十三不中';
                    this.odds = this.ratedata['七码:自选不中:十三不中'];
                    this.continuousData.betnowtype = this.ratedata['七码:自选不中:十三不中'];
                }else if(this.continuousData.betArr.length == 14){
                    this.typetit = '十四不中';
                    this.odds = this.ratedata['七码:自选不中:十四不中'];
                    this.continuousData.betnowtype = this.ratedata['七码:自选不中:十四不中'];
                }else if(this.continuousData.betArr.length == 15){
                    this.typetit = '十五不中';
                    this.odds = this.ratedata['七码:自选不中:十五不中'];
                    this.continuousData.betnowtype = this.ratedata['七码:自选不中:十五不中'];
                }else if(this.continuousData.betArr.length == 16){
                    this.typetit = '十六不中';
                    this.odds = this.ratedata['七码:自选不中:十六不中'];
                    this.continuousData.betnowtype = this.ratedata['七码:自选不中:十六不中'];
                }else if(this.continuousData.betArr.length == 17){
                    this.typetit = '十七不中';
                    this.odds = this.ratedata['七码:自选不中:十七不中'];
                    this.continuousData.betnowtype = this.ratedata['七码:自选不中:十七不中'];
                }
                console.log(this.continuousData);
                this.$emit('contBetFun',this.continuousData);

            },
            
        },
        mounted(){
            this.inits();
        },
        beforeDestroy(){
            clearInterval(timer);
        },
        watch :{
            resetinp: function(now,old){

                if(now != 0){   //重填下注金额

                    this.moneydata = {};  //清空所有下注金额
                    this.betdataArr = [];
                    this.arr = [];
                    
                }
            },
            openBet: function(now,old){
                // console.log(now,old);
                this.init();
            },
            ninetime: function(now,old){
                console.log('------------90s  刷新');
                //90s  刷新数据
                this.init();
            },
        },
    }
</script>
